<template>
  <div class="full-screen-container">
    <!-- 全屏表格容器 -->
    <div class="full-screen-table">
      <el-table
          :data="ActivityData"
          stripe
          style="width: 100%; height: calc(100vh - 120px)"
          :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontSize: '16px'
        }"
          :cell-style="{ padding: '16px 0' }"
      >
        <el-table-column
            prop="id"
            label="ID"
            width="100"
            align="center"
        />
        <el-table-column
            prop="activityName"
            label="服务名称"
            min-width="200"
        />
        <el-table-column
            label="服务时长"
            width="150"
            align="center"
        >
          <template #default="scope">
            <el-tag type="info" size="large">
              {{ scope.row.duration }}分钟
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="服务价格"
            width="150"
            align="center"
        >
          <template #default="scope">
            <span class="price-text">
              ¥{{ scope.row.price.toFixed(2) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
            label="剩余可预约人数"
            min-width="200"
            align="center"
        >
          <template #default="scope">
            <el-tag :type="getRemainingTagType(scope.row.maxNum - scope.row.bookedNum)">
              {{ scope.row.maxNum - scope.row.bookedNum }} / {{ scope.row.maxNum }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="150"
            align="center"
            fixed="right"
        >
          <template #default="scope">
            <el-button
                type="primary"
                size="large"
                @click="goToAppointment(scope.row.id)"
                :disabled="scope.row.maxNum - scope.row.bookedNum <= 0"
            >
              立即预约
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 底部固定分页 -->
    <div class="pagination-footer">
      <el-pagination
          v-model:current-page="ActivityPi.pageNo"
          v-model:page-size="ActivityPi.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="ActivityPi.total"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import api from "@/util/api.js";
import {ElMessage} from "element-plus";

const router = useRouter();

// 活动数据
const ActivityData = ref([]);

// 分页信息
const ActivityPi = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0
});

// 获取活动数据
const fetchActivities = async () => {
  try {
    const response = await api.get("/activity", {
      params: {
        pageNo: ActivityPi.value.pageNo,
        pageSize: ActivityPi.value.pageSize
      }
    });

    // 获取每个活动的预约人数
    const activitiesWithBookedNum = await Promise.all(
        response.data.records.map(async (activity) => {
          const countResponse = await api.get("/appointment/count", {
            params: { activityId: activity.id }
          });
          return {
            ...activity,
            bookedNum: countResponse.data || 0
          };
        })
    );

    ActivityData.value = activitiesWithBookedNum;
    ActivityPi.value.total = response.data.total;
  } catch (error) {
    console.error("获取活动数据失败:", error);
    ElMessage.error("获取活动数据失败");
  }
};

// 跳转到预约页面
const goToAppointment = (activityId) => {
  router.push(`/main/appointment?activityId=${activityId}`);
};

// 根据剩余数量获取标签类型
const getRemainingTagType = (remaining) => {
  if (remaining <= 0) return 'danger';
  if (remaining <= 3) return 'warning';
  return 'success';
};

// 分页处理
const handleSizeChange = (val) => {
  ActivityPi.value.pageSize = val;
  fetchActivities();
};

const handleCurrentChange = (val) => {
  ActivityPi.value.pageNo = val;
  fetchActivities();
};

onMounted(() => {
  fetchActivities();
});
</script>

<style scoped>
.full-screen-container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.full-screen-table {
  flex: 1;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.pagination-footer {
  padding: 20px;
  background: #fff;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.price-text {
  color: #e6a23c;
  font-weight: bold;
  font-size: 16px;
}

/* 调整表格行高 */
:deep(.el-table__row) {
  height: 60px;
}

/* 调整表头高度 */
:deep(.el-table__header th) {
  height: 60px;
}

/* 调整按钮大小 */
:deep(.el-button--large) {
  padding: 12px 20px;
}

/* 新增样式 */
:deep(.el-tag) {
  font-size: 14px;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
}
</style>